<template>
  <div class="box">
    <div v-for="data in commentsList" :key="data.id" class="comment">
      <div class="img">
        <img :src="data.avatar" alt="">
      </div>
      <div class="comment-body">
        <p class="username">{{ data.username }}</p>
        <p class="content">{{ data.content }}</p>
        <p class="date">{{ data.date }}</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted } from 'vue'





interface IComment {
  id: string,
  avatar: string,
  username: string,
  content: string,
  date: string,
}

const commentsList = ref<IComment[]>([])


onMounted(async () => {
  const res = await axios({
    method: "get",
    url: '/commentsList'
  })


  commentsList.value = res.data.result.items

})


</script>


<style scoped lang="scss">
.box {

  .comment {

    display: flex;
    padding: 4vw;
    font-size: 3.5vw;
    line-height: 1.5;
    border-bottom: solid 1px #ccc2c2;

    .img {

      img {

        width: 8vw;
        height: 8vw;
        border-radius: 50%;
        margin-right: 4vw;
      }
    }


    .comment-body {
      flex: 1;

      .username {
        color: #757575;
      }

      .date {
        color: #999;
        font-size: 3.2vw;
      }

      .content {
        color: #212121;
        margin-top: 3vw;
      }
    }
  }
}
</style>